<template>
  <div id="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
import IScroll from 'iscroll/build/iscroll-probe'
export default {
  name: 'ScrollView',
  // 可以拿到界面上渲染之后的内容
  mounted(){
    this.iscroll = new IScroll(this.$refs.wrapper,{
      mouseWheel: true,
      scrollbars: false,
      probeType:3, //像素级别观察
      // 解决拖拽卡顿问题
      scrollX:false,
      scrollY:true,
      disablePointer:true, // 禁用指针触摸事件
      disableTouch:false,
      disableMouse:true // 禁用鼠标触摸事件
    })
    // setTimeout(()=>{
    //   console.log(this.iscroll.maxScrollY);
    //   this.iscroll.refresh()
    //   console.log(this.iscroll.maxScrollY);
    // },5000)

    // 1.创建一个观察者对象
    /*
    MutationObserver构造函数只要监听到了指定内容发生了变化，就会执行传入的回调函数
    mutationList：发生变化的数组
    observer：观察者对象
    * */
   let observer = new MutationObserver((mutationList,observer)=>{
      //  console.log(mutationList);
      // console.log(this.iscroll.maxScrollY);
      this.iscroll.refresh()
      // console.log(this.iscroll.maxScrollY);
   })
   // 2.告诉观察者对象我们需要观察什么内容
   let config = {
     childList:true, // 观察目标字节的的变化，添加或者删除
     subtree:true, // 默认为 false，设置为 true 可以观察后代节点
     attributeFilter:['height','offsetHeight'] // 观察特定属性
   }
   // 3.告诉观察者对象,我们需要观察谁，需要观察什么内容
   /*
   第一个参数：告诉观察者对象我们需要观察谁
   第二个参数：告诉观察者对象我们需要观察什么内容
   * */
   observer.observe(this.$refs.wrapper,config)
  },
  methods: {
    // 提供一个监听滚动距离的方法给外界使用
    scrolling(fn){
      this.iscroll.on("scroll",function(){
        fn(this.y)
      })
    },
    // 提供一个方法让页面内容显示出来后在刷新获取内容的高度
    refresh(){
      setTimeout(()=>{
        this.iscroll.refresh()
      },100)
    },
    // 提供一个上下移动的方法
    scrollTo(x,y,time){
      this.iscroll.scrollTo(x,y,time)
    }
  },
}
</script>

<style scoped>
#wrapper{
  width: 100%;
  height: 100%;
}
</style>

